<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动与定位实现二级菜单</title>
    <style>
        /* 导航栏样式 */
        .nav {
            width: 100%;
            background-color: #dadada;
            /* 导航栏背景色 */
            border-top: 5px solid #FFD700;
            /* 顶部黄色线条 */
            display: flex;
            /* 将.navbar设置为弹性盒子 */
            /* 使用flex布局 */
            justify-content: flex-start;
            /* 左端对齐 */
            align-items: center;
            padding: 10px 20px;
            transition: background-color 0.3s;
            /* 平滑过渡效果 */
            margin: 0;
        }

        /* 导航栏链接样式 */
        .nav a {
            text-decoration: none;
            /* 去掉下划线 */
            color: #333;
            /* 默认字体颜色 */
            font-size: 18px;
            /* 字体大小 */
            font-family: Arial, sans-serif;
            /* 字体 */
            padding: 10px 20px;
            /* 内边距，增加点击区域 */
            transition: background-color 0.3s;
            /* 平滑过渡效果 */
        }

        /* 鼠标悬浮效果 */
        .nav a:hover {
            background-color: #444;
            /* 背景变为灰黑色 */
            color: #fff;
            /* 字体颜色变为白色 */
            border-radius: 6px;
            /* 添加轻微圆角 */
        }

        .nav>li {
            list-style: none;
            float: left;
            /* 使用浮动实现一级菜单水平排列 */
            position: relative;
            /* 用于定位子菜单 */
        }

        .nav>li>a {
            display: block;
            padding: 15px 20px;
            color: #fff;
            text-decoration: none;
            transition: background 0.3s;
        }

        .nav>li>a:hover {
            background-color: #444;
        }

        /* 二级菜单样式 */
        .submenu {
            display: none;
            /* 默认隐藏二级菜单 */
            position: absolute;
            /* 绝对定位，相对于父级元素 */
            top: 50px;
            /* 定位到父元素下方 */
            left: 0;
            background-color: #cbcbcb;
            min-width: 150px;
            z-index: 1000;

        }

        .submenu li {
            list-style: none;
        }

        .submenu li a {
            display: block;
            padding: 10px;
            color: #fff;
            text-decoration: none;
            transition: background 0.3s;
        }

        .submenu li a:hover {
            background-color: #555;
        }

        /* 显示二级菜单 */
        .nav>li:hover .submenu {
            display: block;
            /* 鼠标悬停时显示二级菜单 */
        }
    </style>
</head>

<body>
    <!-- 一级菜单 -->
    <ul class="nav">
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">手机新浪网</a>
            <!-- 二级菜单 -->
            <ul class="submenu">
                <li><a href="#">新浪新闻</a></li>
                <li><a href="#">新浪体育</a></li>
                <li><a href="#">新浪财经</a></li>
            </ul>
        </li>
        <li>
            <a href="#">移动客户端</a>
            <ul class="submenu">
                <li><a href="#">iOS版</a></li>
                <li><a href="#">安卓版</a></li>
                <li><a href="#">其它版本</a></li>
            </ul>
        </li>
        <li>
            <a href="#">博客</a>
            <ul class="submenu">
                <li><a href="#">个人博客</a></li>
                <li><a href="#">热门博客</a></li>
            </ul>
        </li>
        <li>
            <a href="#">关注我</a>
            <ul class="submenu">
                <li><a href="#">微博</a></li>
                <li><a href="#">微信公众号</a></li>
                <li><a href="#">邮箱</a></li>
            </ul>
        </li>
    </ul>
</body>

</html>